<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>证照详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<link rel="stylesheet" href="../../../css/swiper.min.css">
		<style>
			body{background:#fff;}
			/*证照列表点击切换*/
			.mui-bar-nav~.mui-content{padding:0;position:absolute;width:7.5rem;height:100%;top:0;left:0;background:#fff;padding-top:45px;}
		    .swiper-container{width:7.1rem;overflow:hidden;margin:0 auto;height:3.7rem;}
		    .license_list{width:3.33rem;margin:.6rem auto .2rem auto;}
		    .license_list .img_cont{width:100%;height:2rem;}
		    .license_list .img_cont>img{width:100%;height:auto;max-height:2rem;}
		    .license_list>p{width:100%;margin:0;float:left;text-align:center;line-height:.5rem;color:#333;}
			.swiper-button-prev,.swiper-button-next{background-size:.12rem;color:#fff;background-color:#d0d0d0;width:.47rem;height:.35rem;top:3.1rem;margin:0;}
			.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{opacity:1;}
		    .swiper-button-next{right:2.7rem;}
		    .swiper-button-prev{left:2.7rem;}
		    .page_cont{position:absolute;top:3.13rem;left:3.15rem;line-height:.35rem;height:.35rem;width:.8rem;text-align:center;font-size:.3rem;}
			.red{color:#ff7800;}
			/*详情*/
			.control_cont{width:100%;float:left;overflow:auto;}
	        .basic_info{width:7.05rem;overflow:hidden;margin:.2rem auto 0 .22rem;background:#f3f3f3;padding:0;border-radius:.08rem;float:left;}
		    .basic_info>li{width:100%;line-height:1rem;border-bottom:1px solid #e5e5e5;float:right;}
		    .basic_info>li>label,.basic_info>li>a>label{width:1.8rem;float:left;text-align:right;font-size:.3rem;color:#333;box-sizing:border-box;}
		    .basic_info>li>span,.basic_info>li>a>span{font-size:.3rem;color:#9d9d9d;width:5rem;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:.15rem;box-sizing:border-box;}
			.form_control{width:7.07rem;float:left;padding:.3rem .4rem;box-sizing:border-box;line-height:.45rem;color:#9d9d9d;font-size:.3rem;border:none;height:3.4rem;background:#f3f3f3;}
			.surplus{width:7.07rem;float:left;line-height:.3rem;color:#999;text-align:right;font-size:.3rem;}
			.mui-btn-primary{width:6rem;height:.85rem;background:#1653fc;color:#fff;border-radius:.1rem;overflow:hidden;margin:.8rem .75rem;float:left;font-size:.34rem;border-color:#1653fc;}
			.swiper-pagination{display:none;}
			
		</style>
	</head>
	<body>
		<div class="mui-content">
			<!--列表切换-->
			 <div class="swiper-container">
		        <div class="parallax-bg" style="background-image:url(img/Parallax.jpg)" data-swiper-parallax="-23%"></div>
		        <div class="swiper-wrapper" id="slide_div">
		            <div class="swiper-slide">
		            </div>
		        </div>
		         <!-- Add Pagination -->
		        <div class="swiper-pagination swiper-pagination-white"></div>
		        <!-- Add Navigation -->
		        <div class="swiper-button-prev swiper-button-white"></div>
		        <div class="swiper-button-next swiper-button-white"></div>
		        <div class="page_cont">
			        <span class="one_page red" id="one_page_red">0</span>/
			        <span class="all_page" id="all_page_count">0</span>
		        </div>
		    </div>
		    <!--详情-->
		    <ul class="basic_info" id="basic_info_ul">
			 	<li>
			 		<label>证照编号：</label>
			 		<span id="licenseNumber"></span>
			 	</li>
			 	<li>
			 		<label>证照名称：</label>
			 		<span id="licenseName"></span>
			 	</li>
			 	<li>
			 		<label>可信等级：</label>
			 		<span id="licenseClassifyStatus"></span>
			 	</li>
			 	<li>
			 		<label>颁发单位：</label>
			 		<span id="lssuingOrgan"></span>
			 	</li>
			 	<li>
			 		<label>有效日期：</label>
			 		<span id="validDate"></span>
			 	</li>
			 	<li>
			 		<label>同步时间：</label>
			 		<span id="synDate"></span>
			 	</li>
		    </ul>
		    <button type="button" class="mui-btn mui-btn-primary ripple" id="xz">下载</button>
		</div>
	</body>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/jquery2.2.4.min.js"></script>
	<script src="../../../js/swiper.min.js"></script>
	<script type="text/javascript" src="../../../js/file.js" ></script>
	<script>
		var attaId = "";
		var fileType = "";
	    mui.plusReady(function() {
			var oid = utils.getUrlParam("oid");
			loadData(oid);
		});
	    
	    /**
		 * 加载数据
		 * @param {Object} oid 主键
		 */
		function loadData(oid){
			var param = 'oid=' + oid;
			var url = 'appHttpService/appEleclicenView.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0) {
					var eleclicen = JSON.parse(data.eleclicen);
					var faceInfor = data.faceInfor;
					var imgs = data.imgs;
					var path = data.path;
					attaId = data.attaId;
					fileType = data.fileType;
					//图片信息
					if(imgs != null && imgs != undefined && imgs.length>0){
						document.getElementById("all_page_count").innerHTML = imgs.length;
						document.getElementById("one_page_red").innerHTML = '1';
						var slide_div_html = "";
						for(var i in imgs){
							var src = utils.HOST + "ImgServlet?imgPath="+path+imgs[i];
							slide_div_html += " <div class='swiper-slide'><div class='license_list'><span class='img_cont'><img src="+src+"></span></div></div>";
						}
						document.getElementById("slide_div").innerHTML = slide_div_html;
						
						var swiper = new Swiper('.swiper-container', {
					        pagination: '.swiper-pagination',
					        paginationClickable: true,
					        loop : true,
					        nextButton: '.swiper-button-next',
					        prevButton: '.swiper-button-prev',
					        parallax: true,
					        speed: 600,
					        /*触摸滑动上/下一屏事件*/
					        onTouchMove: function(swiper){
				                  var  slo = $('.swiper-pagination .swiper-pagination-bullet-active').index();
				           		$('.page_cont .one_page').html(slo+1);
						    },
						    onSlideChangeEnd: function(swiper){
					       		 var  slo = $('.swiper-pagination .swiper-pagination-bullet-active').index();
				           		$('.page_cont .one_page').html(slo+1);
						    }
					    });
					}
					
					//基本信息
					var tempDateEnd = "";
					if(eleclicen.validDateEnd != '' && eleclicen.validDateEnd != null && eleclicen.validDateEnd != undefined){
						tempDateEnd = "至"+utils.format(eleclicen.validDateEnd,'yyyy-MM-dd');
					}
					document.getElementById("licenseNumber").innerHTML = eleclicen.licenseNumber;
					document.getElementById("licenseName").innerHTML = eleclicen.licenseName;
					document.getElementById("licenseClassifyStatus").innerHTML = eleclicen.licenseClassifyStatus;
					document.getElementById("lssuingOrgan").innerHTML = eleclicen.lssuingOrgan;
					document.getElementById("validDate").innerHTML = utils.format(eleclicen.validDate,'yyyy-MM-dd')+tempDateEnd;
					document.getElementById("synDate").innerHTML = utils.format(eleclicen.synDate,'yyyy-MM-dd');
					
					if(faceInfor != undefined && faceInfor != null){
						faceInfor = JSON.parse(data.faceInfor);
						var fragment = document.createDocumentFragment();
						for(var i in faceInfor){
							var li = document.createElement('li');
							li.innerHTML = "<label>"+i+"：</label><span>"+faceInfor[i]+"</span>";
							fragment.appendChild(li);
						}
						document.getElementById("basic_info_ul").appendChild(fragment);
					}
				}
			}, param);
		}
		
		//下载
		document.getElementById('xz').addEventListener('tap', function() {
			var url = utils.HOST + 'appHttpService/appDownLoadEleclicen.do?oid=' + attaId;
			showOrDown(url,attaId,null,fileType,function(path){
				openDir(path);
			})
			
		});
	    
	</script>
</html>
